<template>
  <div class="terminal-page">
    <div class="terminal-search-title">
      <el-row :gutter="15">
        <el-col :span="3">
          <el-input
            placeholder="搜索组名"
            suffix-icon="el-search"
            @keyup.native.enter="queryMethods"
            v-model="searchObj.clientGroupName">
          </el-input>
        </el-col>
<!--        <el-col :span="3">-->
<!--          <el-select v-model="searchObj.region" placeholder="组名">-->

<!--          </el-select>-->
<!--        </el-col>-->

        <el-col class="control-fixed-pos" :span="18">
          <el-button type="primary" @click="queryMethods">搜素</el-button>
          <el-button type="primary" @click="addNewGroup">添加</el-button>
          <el-button type="danger" @click="showMutiDel" icon="el-icon-delete">删除</el-button>
        </el-col>
      </el-row>
    </div>

    <CommonTable
      class="commonTable"
      ref="groupTableRef"
      :is-selection="true"
      :is-show-index="true"
      :is-has-opera="true"
      row-key="deccaId"
      :t-column-data="groupManagerCol"
      :query-params="searchObj"
      :remote-api="getGroupList"
      :is-reserve-select="true"
      operating-width="180px"
      @changeRow="changeRowMethods"
    >
      <template slot="operate" slot-scope="scope" class="operate-btn">
        <el-button type="text" @click="editGroup(scope.row)">编辑</el-button>
        <el-button type="text" class="del-button" @click="delGroup(scope.row)">删除</el-button>
      </template>
    </CommonTable>

    <el-dialog
      title="分组管理"
      :visible.sync="isShowGroup"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form ref="form" :model="groupForm" label-width="80px">
          <el-form-item label="分组名称">
            <el-input v-model="groupForm.groupName"></el-input>
            <span>点击“添加”按钮，弹出此“添加新的分组”画面。</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="confirmAddGroup">确 定</el-button>
      </span>
    </el-dialog>

    <WarnPanelDialog
      :statusProp="statusProp"
      @confirmHandler="confirmDelMethods"
      @cancelHandler="cancelHandler"
    ></WarnPanelDialog>
  </div>
</template>

<script>
import CommonTable from "@/components/Table/commonTable";
import WarnPanelDialog from "@/components/WarnPanelDialog";
import {groupManagerCol} from './tableCol/groupManagerCol'
import * as service from './service'
export default {
  name: "index",
  components: {
    CommonTable,
    WarnPanelDialog
  },
  data() {
    return {
      statusProp: false,
      isShowGroup: false,
      groupList: [],
      searchObj: {
        clientGroupName: '',
        page: 1,
        pageSize: 20
      },
      groupForm: {
        groupName: ''
      },
      groupManagerCol: groupManagerCol,
      total: 0,
      getGroupList: service.getGroupList,
      clickCache: {},
      mutiDelList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    showMutiDel() {
      if(this.mutiDelList.length === 0) {
        this.$message.error('请选择删除的数据')
        return
      }
      this.statusProp = true
    },
    changeRowMethods(row) {
      this.mutiDelList = [...row]
    },
    delGroup(row) {
      this.clickCache = {...row}
      this.statusProp = true
    },
    cancelHandler() {
      this.statusProp = false
      this.clickCache = {}
      this.mutiDelList = []
    },
    confirmDelMethods() {
      if(this.mutiDelList.length > 0) {
        const params = {
          ids: []
        }
        this.mutiDelList.forEach((item) => {
          params.ids.push(item.id)
        })

        service.mutiDelGroupList(params.ids).then(() => {
          this.$message.success('删除成功')
          this.getList()
          this.statusProp = false
          this.mutiDelList = []
        })
      } else {
        const params = {
          id: this.clickCache.id
        }
        service.delGroupList(params).then(() => {
          this.$message.success('删除成功')
          this.getList()
          this.statusProp = false
          this.clickCache = {}
        })
      }
    },
    editGroup(row) {
      this.groupForm.groupName = row.group_name
      this.groupForm.id = row.id
      this.isShowGroup = true
    },
    confirmAddGroup() {
      const params = {
        ...this.groupForm
      }

      service.saveGroupList(params).then(() => {
        if(this.groupForm.id) {
          this.$message.success('修改成功')
        } else {
          this.$message.success('新增成功')
        }

        this.getList()
        this.handleClose()
      })
    },
    handleClose() {
      this.isShowGroup = false
      this.groupForm = {
        groupName: ''
      }
    },
    addNewGroup() {
      this.isShowGroup = true
    },
    queryMethods() {
      this.searchObj.page = 1
      this.getList()
    },
    getList() {
      const params = Object.assign({}, this.searchObj)

      this.$refs.groupTableRef.queryData(params)
    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    }
  }
}
</script>

<style scoped lang="scss">
  .terminal-page{
    padding: 15px;
    background: white;

    .commonTable{
      margin-top: 15px;
    }

    .page-nation{
      margin-top: 15px;
    }
  }
</style>
